import React, { Component } from 'react'
import { SearchBar, Grid, Tag,Tabs } from 'antd-mobile'
import Logo from '../../assets/img/logo2.png'
import Nav from '../../assets/img/nav.png'

import yubuy1 from '../../assets/img/yubuy1.png'
import yubuy2 from '../../assets/img/yubuy2.png'
import yubuy3 from '../../assets/img/yubuy3.png'

import './home.less'
import Newhav from './components/Newhav/Newhav'
import Wanpople from './components/Wanpople/Wanpople'
import Onlytime from './components/Onlytime/Onlytime'
import Goods from './components/Goods/Goods'

import {reqNewhave,reqwantuan,reqtime,reqgoods} from '../../request/api'
export default class Home extends Component {
  constructor(){
    super()
    this.state={
       newhav:[],//新人专享
       wanpople:[],//万人团
       onlytime:[],//秒杀
       goods:[],//商品信息
       n:0
    }
  }
  componentDidMount(){
  //  新人专享
  reqNewhave().then(d=>{
     this.setState({
       newhav:d.data.list
     })
  })
  // 万人团
  reqwantuan().then(d=>{
    this.setState({
      wanpople:d.data.list
    })
  })
  // 秒杀
  reqtime().then(d=>{
    this.setState({
      onlytime:d.data.list
    })
  })
  // 商品信息
  reqgoods().then(d=>{
    this.setState({
      goods:d.data.list
    })
  })
  }
  changeN(n){
   this.setState({
     n
   })
  }
  render() {
    let {newhav,wanpople,onlytime,goods,n}=this.state
    return (
      <div>
        {/* {JSON.stringify(newhav)} */}
        <div className='Header'>
          <span className='logo'>
            <img src={Logo} alt="" />
          </span>
          <div className='seach'>
            <SearchBar
              placeholder='请输入内容'

              style={{
                '--border-radius': '100px',
                '--background': '#ffffff',
                '--height': '32px',
                '--padding-left': '12px',
              }}
            />
          </div>
          <div className='icon'>
            <img src={Nav} alt="" />
          </div>
        </div>
       <Newhav newhav={newhav}></Newhav>
       <Wanpople wanpople={wanpople}></Wanpople>
        <Onlytime onlytime={onlytime}></Onlytime>
        <div className='buy'>
        <Tabs
          activeLineMode='fixed'
          style={{
            '--fixed-active-line-width': '20px',
          }}
        >
          <Tabs.Tab title='双十一预购' key='1'>
          <img src={yubuy1} alt="" />
          </Tabs.Tab>
          <Tabs.Tab title='畅购全球' key='2'>
          <img src={yubuy2} alt="" />
          <img src={yubuy3} alt="" />
          </Tabs.Tab>
         
        </Tabs>
        </div>
        <Goods goods={goods} n={n} changeN={(n)=>{this.changeN(n)}}></Goods>
      </div>
    )
  }
}
